<template>
  <div class="div">
    <van-tabs
      v-model:active="active"
      class="card"
      title-inactive-color="#5BC4C5"
      title-active-color="#fff"
      click="handleClick"
      color="#fff"
      :animated="true"
    >
      <van-tab title="肤质近况">
        <img
          class="img"
          src="http://121.40.124.132:3000/images/cus/tab1.png"
          alt=""
        />
      </van-tab>
      <van-tab title="了解度32%">
        <img
          class="img"
          src="http://121.40.124.132:3000/images/cus/tab2.png"
          alt=""
        />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const active = ref(2);
    return { active };
  },
};
</script>

<style lang="less">
.div {
  .card {
    margin-left: 16px;
  }
  .van-tabs__nav {
    padding-bottom: 10px;
    border-radius: 10pt 10pt 0 0;
    width: 345px;
  }
  .van-tabs {
    padding: 5pt 0;
  }
  .van-tab:nth-child(1) {
    border-radius: 10pt 0 0 0;
  }
  .van-tab:nth-child(2) {
    border-radius: 0 10pt 0 0;
  }

  .van-tab {
    margin: 0 1pt;
    background: #d2f0f2;
    /deep/ .van-ellipsis {
      font-weight: bold;
    }
  }
  .img {
    width: 343px;
    height: 160px;
    margin-top: 3px;
  }
  .van-tab--active {
    background: #64c8c8;
  }
  .van-tabs__line {
    width: 21px;
    height: 2px;
  }
}
</style>
